<!--
 * @Author: Bennty
 * @Date: 2024-12-03 10:12:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-04 10:03:52
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="编辑箱规" @close="handleClose">
        <el-form :model="formData" ref="formRef" label-width="auto">
            <el-form-item label="选择纸箱" prop="paperAuxiliaryId">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-select v-model="selectedMajorType" filterable @change="handleMajorTypeChange">
                            <el-option v-for="item in types" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="selectedSubType" filterable>
                            <el-option v-for="item in subclassTypes" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="formData.paperAuxiliaryId" placeholder="请选择" filterable>
                            <el-option v-for="item in auxiliaryList" :key="item.id" :label="item.specsDetail" :value="item.id" ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                
            </el-form-item>
            <el-form-item label="装箱规格" prop="boxSpecifications">
                <el-input type="number" v-model.number="formData.boxSpecifications" @change="handleInputing" style="width:25%">
                    <template #append>/箱</template>
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { editBoxGaugeApi, getBoxGaugeInfoApi } from '@/api/sj/productManagement/productConfigure';
import { getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';
import { getAuxiliaryByTypeApi } from '@/api/sj/warehouse/auxiliary';

const props = defineProps<{
    visible: boolean,
    data: any,
    types: any[]
}>();
const emits = defineEmits(['close','submit']);

const formRef = ref<FormInstance>();

const formData = ref<any>({
    id: undefined,
    paperAuxiliaryId: undefined,
    boxSpecifications: undefined
});

const subclassTypes = ref<any[]>([]);
const selectedMajorType = ref<any>();
const selectedSubType = ref<any>();
const auxiliaryList = ref<any[]>([]);


watch(()=>props.data, async (newData)=>{
    if(props.visible){
        formData.value.id = newData.id;
        const { data } = await getBoxGaugeInfoApi(newData.id);
        if(data){
            formData.value.boxSpecifications = data.boxSpecifications;
            selectedMajorType.value = data.productCategoriesType;
            selectedSubType.value = data.productSubcategoryType;
            formData.value.paperAuxiliaryId = data.paperAuxiliaryId;
        };
    };
});

/** 根据材料大类，获取材料小类 */
watch(()=>selectedMajorType.value,async (newData)=>{
    if(selectedMajorType.value){
        const { code, data } = await getSingleByTotalApi(newData);
        if(code == 200){
            subclassTypes.value = data;
        };
    };
});

/** 选择大类，清除小类与产品选项 */
const handleMajorTypeChange = () => {
    selectedSubType.value = undefined;
    formData.value.paperAuxiliaryId = undefined;
};

/** 根据材料大类与材料小类，获取辅材列表 */
watch(()=>[selectedMajorType.value, selectedSubType.value],async ([newlyMajorType, newlySubType])=>{
    // console.log(newlyMajorType, newlySubType);
    if(newlyMajorType && newlySubType){
        const { code, data } = await getAuxiliaryByTypeApi(newlyMajorType, newlySubType);
        if(code == 200){
            auxiliaryList.value = data;
        };
    }
});

const handleInputing = (value: number)=>{
    if(value < 0){
        formData.value.boxSpecifications = 0;
    };
};

const handleSubmit = async () => {
    const { code } = await editBoxGaugeApi({...formData.value});
    if(code == 200){
        emits('submit',true);
    }else{
        emits('submit', false);
    }
}

const handleClose = () => {
    formRef.value?.resetFields();
    selectedMajorType.value = undefined;
    selectedSubType.value = undefined;
    emits('close');
};
</script>

<style scoped>

</style>